<template>
    <van-nav-bar 
        :title="title"
        fixed
        class="myhead"
    >   
        <template #left v-if="!back" >
            <slot >
                 <van-icon name="arrow-left" class="size"  @click="gotoback" />
            </slot>
           
        </template>
        <template #right>
            <van-popover  @select="chooseitem" v-model="showPopover" trigger="click" :actions="actions" placement="bottom-end">
                <template #reference>
                    <van-icon name="ellipsis"  class="size"/>
                </template>
            </van-popover>
        </template>
    </van-nav-bar>
</template>

<script>
export default {
    data(){
        return {
            showPopover:false,
            actions:[],
            actions1:[  // 登录
                { text: '搜索', icon: 'search',name:"search" , disabled:this.$route.name=='search'},
                { text: '首页', icon: 'wap-home-o',name:"shouye",disabled:this.$route.name=='shouye' },
               
            ],
            actions2:[   // 没有登录 
                { text: '搜索', icon: 'search',name:"search" , disabled:this.$route.name=='search'},
                { text: '登录', icon: 'friends-o' ,name:"login",disabled:this.$route.name=='login'},
                { text: '注册', icon: 'more-o',name:"register" ,disabled:this.$route.name=='register'},
                { text: '首页', icon: 'wap-home-o',name:"shouye",disabled:this.$route.name=='shouye' },
              
            ]
        }
    },
    props:{
        title:String,
        back:{
            type:Boolean,
            default:true,
        } 
    },
    watch:{
        userInfo:{
            deep:true,
            handler(v){
                if(v){
                    // 登录
                    this.actions = [...this.actions1]
                }else{
                    // 没有登录
                    this.actions = [...this.actions2]
                }
            }
        }
    },
    methods:{
        chooseitem(value,index){
            console.log(value,index)
            this.$router.push({
                name:value.name 
            })
        }
    },
    mounted(){
        if(this.userInfo){
            // 登录
            this.actions = [...this.actions1]
        }else{
            this.actions = [...this.actions2]
        }
    }
}
</script>

<style lang="scss" scoped>
.myhead{
    width:100%;
    position: fixed;
    top:0;
    left:0;
    z-index:1000;
    .size{
        font-size: 20px;
    }
}
</style>